<template>
    <div>
        <el-form label-position="left" label-width="120px" size="mini" inline @submit.native.prevent>
            <el-form-item label="数据来源名称">
                <el-input v-model="dataSource.data_source_name" size="mini" style="width: 200px" @keyup.enter.native="search" title="支持回车查询">
                </el-input>
            </el-form-item>
            <el-form-item label="数据来源权威度">
                <el-input-number v-model="dataSource.data_source_degree" style="width:150px;" :min = "0" :max = "10" @keyup.enter.native="search" title="支持回车查询"></el-input-number>
            </el-form-item>
            <el-button type="primary" size="mini" @click="search">查询&nbsp;<c-icon name="search" scale="0.7"></c-icon></el-button>
            <el-button type="danger" size="mini" @click="reset">重置&nbsp;<c-icon name="undo" scale="0.7"></c-icon></el-button>
        </el-form>
        <el-table :data="dataSourceList.slice((pageNo -1) * pageSize, ((pageNo -1) * pageSize) + pageSize)" 
            @sort-change = "sortChange"
            v-loading="listLoading" element-loading-text="列表加载中..." style="width: 100%" max-height="680" border fit highlight-current-row>
            <el-table-column align='center' width="120px" prop="" label="操作">
                <template slot-scope="scope">
                    <el-button type="text" size="mini" icon="edit" @click="$router.push(`/dataSourceConf/${scope.row.data_source_id}`)" title="编辑">编辑</el-button>
                    <!--<el-button type="text" size="mini" icon="delete" @click="" title="删除">删除</el-button>-->
                </template>
            </el-table-column>
            <el-table-column align='center' width="120px" prop="data_source_id" label="数据来源ID" sortable='custom'></el-table-column>
            <el-table-column align='center' prop="data_source_name" label="数据来源名称" sortable='custom'></el-table-column>
            <el-table-column align='center' width="150px" prop="data_source_alias" label="数据来源别名" sortable='custom'></el-table-column>
            <el-table-column align='center' width="150px" prop="data_source_degree" label="数据来源权威度" sortable='custom'></el-table-column>
            <el-table-column align='center' width="100px" prop="creator" label="创建人" sortable='custom'></el-table-column>
            <el-table-column align='center' width="150px" prop="creat_time" label="创建时间" sortable='custom'>
                <template slot-scope="scope">
                    {{formatDate(scope.row.creat_time)}}
                </template>
            </el-table-column>
            <el-table-column align='center' width="100px" prop="updator" label="更新人" sortable='custom'></el-table-column>
            <el-table-column align='center' width="150px" prop="update_time" label="更新时间" sortable='custom'>
                <template slot-scope="scope">
                    {{formatDate(scope.row.update_time)}}
                </template>
            </el-table-column>
            <el-table-column align='center' width="80px" prop="status" label="状态" sortable='custom'>
                <template slot-scope="scope">
                    <c-icon v-if="scope.row.status == 1" name="check" style="color:#00AE66;"></c-icon>
                    <c-icon v-else name="times" style="color:#e74c3c;"></c-icon>
                </template>
            </el-table-column>
        </el-table>
        <el-row type="flex" justify="start" style="padding:10px 0;">
            <el-pagination
                v-show = "dataSourceList.length"
                @size-change="sizeChange"
                @current-change="currentChange"
                :current-page="pageNo"
                :page-sizes="[30, 50, 100, 200]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="dataSourceList.length">
            </el-pagination>
        </el-row>
    </div>
</template>
<script>
import { getDataSourceList } from '../../api/crawl.js';
import dayjs from 'dayjs';
import lodash from 'lodash';
import icon from 'vue-awesome';
export default {
    data(){
        return {
            listLoading : false,
            dataSourceList : [],
            allDataSourceList : [],
            /* 分页相关 */
            pageNo : 1,
            pageSize : 30,
            /* 查询相关 */
            dataSource : {
                data_source_name : '',
                data_source_degree : '',
            },
        }
    },
    components: { 
        'c-icon' : icon
    },
    created(){
        this.initDataSourceList();
    },
    watch: {
    },
    methods: {
        initDataSourceList(){
            this.listLoading = true;
            getDataSourceList().then(data=>{
                this.listLoading = false;
                this.dataSourceList = data.rows;
                this.allDataSourceList = data.rows;
            })
        },
        formatDate(dateTime){
            if(!dateTime){
                return '--';
            }
            return dayjs(dateTime).format('YYYY-MM-DD HH:mm:ss');
        },
        sizeChange(pageSize){
            this.pageSize = pageSize;
        },
        currentChange(pageNo){
            this.pageNo = pageNo;
        },
        //排序
        sortChange(data){
            let {order, prop} = data;
            //如果是顺序则按照顺序排，否则就按照倒序排
            if(order === 'descending'){
                this.dataSourceList = lodash.orderBy(this.dataSourceList, [prop], 'desc');
            }else{
                this.dataSourceList = lodash.orderBy(this.dataSourceList, [prop], 'asc');
            }
            this.pageNo = 1;
        },
        search(){
            let resultList = this.allDataSourceList;
            console.log('this.dataSource------', this.dataSource)
            if(this.dataSource.data_source_degree){
                resultList = resultList.filter(item => item.data_source_degree === Number(this.dataSource.data_source_degree));
            }
            if(this.dataSource.data_source_name){
                resultList = resultList.filter(item => item.data_source_name.toLowerCase().indexOf(this.dataSource.data_source_name.toLowerCase()) > -1);
            }
            
            this.dataSourceList = resultList;
            this.pageNo = 1;
        },
        reset(){
            this.dataSource.data_source_degree = '';
            this.dataSource.data_source_name = '';
            this.initDataSourceList();
            this.pageNo = 1;
        },
    }
};
</script>